<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 100%;
            height: 100%;
        }

        h1 {
            text-align: center;
            padding: 20px 0;
        }

        p {
            font-size: 15px;
            color: grey;
            padding: 10px 0;
            text-align: center;
        }

        .row {
            display: flex;
            height: 50px;
            justify-content: center;
            align-items: center;
        }

        .row span {
            width: 100px;
        }

        .row .edit {
            width: 200px;
            height: 36px;
        }

        .row .submit {
            width: 300px;
            height: 30px;
            background-color: orange;
            color: #fff;
            border: none;
            /* 去掉按钮边框*/
        }

        .row .submit:active {
            background-color: grey;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>评论框</h1>
        <p>输入后点击提交, 将会把消息显示在墙上</p>
        <div class="row">
            <span>谁:</span>
            <input type="text" class="edit" value="我">
        </div>
        <div class="row">
            <span>对谁:</span>
            <input type="text" class="edit" value="队友">
        </div>
        <div class="row">
            <span>说什么:</span>
            <input type="text" class="edit">
        </div>
        <div class="row">
            <input type="button" value="提交" class="submit">
        </div>

        <ul class="list">
            <li class="list-item">

            </li>
        </ul>


        <script>

            var tjbutton = document.getElementsByClassName('submit')[0]
            var srk = document.getElementsByClassName('edit')

            tjbutton.onclick = function () {

                var me = srk[0].value
                var toyou = srk[1].value
                var say = srk[2].value

                if (me == "" || toyou == "" || say == "") {
                    return
                }

                var row = document.createElement('div')
                row.className = 'row'

                // 评论/留言发送之前, 对可能出现的敏感词进行过滤 / 检测
                // 检测  => 是否存在敏感词
                // 过滤  => 将敏感词替换为等量的 *

                
                
                // 检测
                // var keyWords = ["菜","菜逼","菜狗","NMD","CNM","TMD","SB"];  
                // var reg = new RegExp(keyWords.join("|"),"i");
                // var isIllegal = reg.test(say);
                // if(!isIllegal){
                //     row.innerHTML = `${me}对${toyou}说:${say}`
                // }else{
                //     row.innerHTML = `系统检测到敏感词汇,请注意言行!`
                //     row.style.color = "red";
                // }


                // 过滤
                var keyWords = ["菜B","菜狗","菜","NMD","CNM","TMD","SB"];  
                for(var i=0;i<keyWords.length;i++){
                    var key = keyWords[i]; // 每一个敏感词
                    var reg = new RegExp(key,"ig"); // 忽略大小写 => 替换所有

                    if(reg.test(say)){
                        // var newStr = "";
                        // for(var j=0;j<key.length;j++){
                        //     newStr += "*";
                        // }
                        // say = say.replace(reg,newStr);  // 返回替换后的新字符 (替换为等量的*)
                        say = say.replace(reg,"*".repeat(key.length));  // 返回替换后的新字符 (替换为等量的*)
                    }
                   
                }


                row.innerHTML = `${me}对${toyou}说:${say}`





                var container = document.getElementsByClassName('container')[0]
                container.appendChild(row)

                for (var i = 0; i < srk.length; i++) {
                    srk[i].value = ''
                }


            }

































      



        </script>
</body>

</html>